<template>
  <div class="app-container">
    <!-- 移动端菜单按钮 -->
    <button class="menu-toggle" @click="toggleSidebar">☰</button>

    <!-- 侧边菜单栏 -->
    <nav class="sidebar" :class="{ 'sidebar-hidden': !sidebarVisible }">
      <ul>
        <li @click="navigateTo('/images')">图片展示</li>
        <li @click="navigateTo('/image-overview')">图片总览</li> <!-- 新增 -->
        <li @click="navigateTo('/tags')">标签管理</li>
      </ul>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      sidebarVisible: window.innerWidth > 768 // 默认大屏幕显示
    };
  },
  methods: {
    navigateTo(route) {
      this.$router.push(route);
      if (window.innerWidth <= 768) this.sidebarVisible = false; // 小屏幕点击后关闭菜单
    },
    toggleSidebar() {
      this.sidebarVisible = !this.sidebarVisible;
    },
    handleResize() {
      this.sidebarVisible = window.innerWidth > 768;
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() { // 这里改成 beforeUnmount
    window.removeEventListener('resize', this.handleResize);
  }
};
</script>

<style scoped>
@import '@/css/styles.css';
</style>
